<template>
  <section class="item-tab">
    <p class="item-tab__title">
      {{ title }}
    </p>
    <div class="item-tab__content">
      <slot></slot>
    </div>
  </section>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({

  props: {
    title: {
      type: String,
    }
  },

  setup(props, { attrs, slots, emit }) {
    return {
      ...props,
    }
  }
})
</script>

<style lang="scss" scoped>
  .item-tab {
    position: relative;
    min-width: 35%;
    // width: 100%;
    margin: 0 .75rem 1.5rem;
    background-color: white;
    box-shadow: var(--shadow);
    border-radius: 5px;

    &__title {
      color: var(--color-primary);
      padding: .75rem 1.25rem;
      border-bottom: 1px solid #e3e6f0;
    }

    &__content {
      padding: 10px;
    }

  }
</style>
